<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue学习</title>
    <script src="./js/vue2.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- <h3>手机号：<span v-phone>{{phone}}</span></h3> -->
      <!-- <h3>手机号：<span>{{showPhone}}</span></h3> -->
      <!-- <h3>手机号：<span>{{printPhone()}}</span></h3> -->
      <h3>手机号：<span>{{phone | filterPhone('+')}}</span></h3>
      <h3>手机号：<span>{{phone | filterPhone}}</span></h3>
    </div>
    <script>
      // 过滤器只有vue2有，它定义有两种，全局  和  局部

      // 参数1：为要进行过滤的数据
      // 参数2... 小括号中的参数
      Vue.filter('filterPhone', (value, sep = '*') => {
        return value.slice(0, 3) + sep.repeat(4) + value.slice(7)
      })

      new Vue({
        el: '#app',
        data: {
          phone: '12352125212'
        },
        filters: {},
        methods: {
          printPhone() {
            return this.phone.slice(0, 3) + '****' + this.phone.slice(7)
          }
        },
        computed: {
          showPhone() {
            return this.phone.slice(0, 3) + '****' + this.phone.slice(7)
          }
        },
        directives: {
          phone(el) {
            el.innerHTML =
              el.innerHTML.slice(0, 3) + '****' + el.innerHTML.slice(7)
          }
        }
      })
    </script>
  </body>
</html>
